<div class="row">
    <div class="large-12 columns">
        <h1 class="primary" style="text-align: center">{{pipelineName}}</h1>
    </div>

    <div class="row">
        <div class="large-12 medium-12 columns">
            <div class="grid-block">
                <div class="grid-block">
                    <div class="grid-content" style="text-align: center">
                        <img tw-status-image="{{context.status}}" height="150" width="150" />
                        <div>
                        <ul class="button-group">
                            <li ng-show="context.status != 'SUCCESS' && context.status != 'IN_PROGRESS'"><tw-command text="Retry" command="/contexts/{{context.id}}/retry"></tw-command></li>
                        </ul>
                        </div>
                    </div>
                    <div class="grid-content align-center">
                        <table>
                            <tbody>
                                <tr>
                                    <td style="text-align: right">Context:</td>
                                    <td>{{context.id}}</td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">Workspace:</td>
                                    <td>{{context.workspace}}</td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">Metadata Dir:</td>
                                    <td>{{context.metaDirectory}}</td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">Start Time:</td>
                                    <td>{{context.startTime | date:'medium'}}</td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">End Time:</td>
                                    <td>{{context.endTime | date:'medium'}}</td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">Duration:</td>
                                    <td>{{context.duration() | millisecondsToTimeString}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="grid-block">
                <div class="grid-content">
                    <div class="box-header grid-content" ng-click="showScript = !showScript">
                        <h4>Script</h4>
                    </div>
                    <div class="box-body grid-content" ng-show="showScript" style="max-height: 600px; overflow: scroll;">
                        <div hljs hljs-source="context.script" hljs-language="groovy"></div>
                    </div>
                </div>
            </div>
            <div class="grid-block" ng-repeat="step in context.steps">
                <div class="grid-content" style="overflow: hidden">
                    <div class="box-header" ng-click="step.show = !step.show">
                        <img tw-status-image="{{step.status}}" height="32" width="32" />
                        <strong>{{step.name}}</strong>
                        <em>{{step.typeSimpleName()}}</em>
                        <span class="right"><span ng-show="step.attempts.length > 1" ng-repeat="attempt in step.attempts"><img tw-status-image="{{attempt.status}}" height="16" width="16" /></span></span>
                    </div>
                    <div class="box-body" ng-show="step.show">
                        <div class="grid-block large-up-2 align-center">
                            <div class="grid-content">
                                <h5>Inputs</h5>
                                <span ng-repeat="(k,v) in step.inputs">{{k}}: <strong>{{v}}</strong><br /></span>
                                <span ng-show="isEmpty(step.inputs)"><strong>¯\_(ツ)_/¯</strong></span>
                            </div>
                            <div class="grid-content shrink">
                                <h5>Outputs</h5>
                                <span ng-repeat="(k,v) in step.outputs">{{k}}: <strong>{{v}}</strong><br /></span>
                                <span ng-show="isEmpty(step.outputs)"><strong>¯\_(ツ)_/¯</strong></span>
                            </div>
                        </div>
                        <hr />
                        <div class="grid-block">
                            <div class="grid-content">
                                <step-attempt-details attempt="step.attempts[0]" ng-show="step.attempts.length === 1"></step-attempt-details>
                            </div>
                        </div>
                        <div class="large-12 columns" ng-repeat="attempt in step.attempts" ng-show="step.attempts.length > 1">
                            <div class="box-header" ng-click="attempt.show = !attempt.show">
                                <img tw-status-image="{{attempt.status}}" height="16" width="16" /> {{step.stepName}} &#8594; Attempt {{$index + 1}}
                            </div>
                            <div class="box-body" ng-show="attempt.show">
                                <step-attempt-details attempt="attempt" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/vendor/jquery.js"></script>
    <script src="/js/foundation.min.js"></script>
    <script>
      $(document).foundation();



    </script>
</div>